<template>
  <!-- 水印 -->
  <view class="watermark">
    <block v-for="(item, index) in num" :key="index">
      <view
        class="watermark-text"
        v-if="text != ''"
        :style="{ opacity: opacity }"
        >{{ text }}</view
      >
      <image
        v-if="imgUrl != '' && text == ''"
        class="watermark-img"
        :src="imgUrl"
        mode="aspectFill"
        :style="{ opacity: opacity }"
      ></image>
    </block>
  </view>
</template>

<script setup lang="ts">
defineProps({
  text: {
    //设置水印文字
    type: String,
    default: '',
  },
  imgUrl: {
    //设置水印图片
    type: String,
    default: '',
  },
  opacity: {
    //设置透明度
    type: [Number, String],
    default: 0.3,
  },
  num: {
    //设置水印数量
    type: Number,
    default: 20,
  },
});
</script>

<style lang="scss" scoped>
.watermark {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  z-index: 999;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  .watermark-text {
    width: 375upx;
    height: 375upx;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-45deg);
    color: #ffffff;
    font-size: 24upx;
    white-space: nowrap;
  }
  .watermark-img {
    width: 375upx;
    height: 375upx;
    z-index: 1;
  }
}
</style>
